<template>
  <div>
    <el-card class="tree-card">
      <!-- 用了一个行列布局 -->
      <el-row
        type="flex"
        justify="space-between"
        align="middle"
        style="height: 40px"
      >
        <el-col>
          <span>{{ company.companyName }}</span>
        </el-col>
        <el-col :span="4">
          <el-row type="flex" justify="end">
            <!-- 两个内容 -->
            <el-col>负责人</el-col>
            <el-col style="cursor: pointer">
              <!-- 下拉菜单 element -->
              <el-dropdown @command="handleCommand">
                <span> 操作<i class="el-icon-arrow-down" /> </span>
                <!-- 下拉菜单 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    :command="beforeHandleCommand('add', company)"
                  >添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-tree :data="departs" :props="defaultProps" default-expand-all>
        <template v-slot:default="{ data }">
          <el-row
            type="flex"
            justify="space-between"
            align="middle"
            style="height: 40px; width: 100%"
          >
            <el-col>
              <span>{{ data.name }}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>{{ data.manager }}</el-col>
                <el-col style="cursor: pointer">
                  <!-- 下拉菜单 element -->
                  <el-dropdown @command="handleCommand">
                    <span> 操作<i class="el-icon-arrow-down" /> </span>
                    <!-- 下拉菜单 -->
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        :command="beforeHandleCommand('add', data)"
                      >添加子部门</el-dropdown-item>
                      <el-dropdown-item
                        :command="beforeHandleCommand('edit', data)"
                      >编辑部门</el-dropdown-item>
                      <el-dropdown-item
                        :command="beforeHandleCommand('del', data)"
                      >删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </el-card>
    <!-- 弹出框 -->
    <AddDept
      ref="addDept"
      :show-dialog.sync="showDialog"
      :node="node"
      @addDepts="getDepartments"
    />
  </div>
</template>

<script>
import { getDepartments, delDepartments } from '@/api/departments'
import AddDept from './components/add-dept'
export default {
  components: {
    AddDept
  },
  data() {
    return {
      company: {},
      departs: [
        {
          name: '第一层1',
          manager: 'aa',
          id: 1,
          pid: '',
          children: [{ name: '11', manager: 'aaaa' }]
        },
        { name: '第一层2', manager: 'bb', id: 2, pid: '' },
        { name: '第二层1', manager: 'cc', id: 3, pid: 1 },
        { name: '第三层1', manager: 'dd', id: 4, pid: 3 }
      ],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      showDialog: false,
      node: {} // 当前点击行数据
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    beforeHandleCommand(type, data) {
      return {
        type: type,
        row: data
      }
    },
    async handleCommand(command) {
      // console.log(command)
      switch (command.type) {
        case 'add':
          this.showDialog = true
          this.node = command.row
          break
        case 'del':
          try {
            this.$confirm('确定要删除此部门吗？')
              .then(() => {
                delDepartments(command.row.id)
                  .then((res) => {
                    console.log(res)
                    this.getDepartments()
                  })
                  .catch(() => {})
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
              })
          } catch (err) {
            console.log(err)
          }
          break
        case 'edit':
          this.node = command.row
          // 返回的也是一个propmise 优化 当数据拿到后再打开弹框
          await this.$refs.addDept.getDepartDetail(command.row.id)
          this.showDialog = true
          break
      }
    },
    // 获取公司组织结构数据
    async getDepartments() {
      const res = await getDepartments()
      console.log('获取组织结构数据', res)
      this.company = {
        companyName: res.companyName,
        id: ''
      }
      this.companyName = res.companyName
      this.departs = this.tranListToTreeData(res.depts, '')
      // console.log(this.departs)
    },
    // 递归数据转换为树形数据
    tranListToTreeData(list, rootId) {
      const arr = []
      list.forEach((item) => {
        if (item.pid === rootId) {
          const children = this.tranListToTreeData(list, item.id)
          if (children.length) {
            item.children = children
          }
          arr.push(item)
        }
      })
      return arr
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
